<template>
  <div>
    <el-dialog
      v-model="isShow"
      title="添加班级"
      width="500"
      center
      @close="closeDialog"
    >
      <el-form ref="form" :model="classInfo" :rules="rules" >
        <el-form-item label="班级名称:" prop="className" >
          <el-input
            placeholder="请输入班级名称"
            v-model="classInfo.className"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addClass"> 确定 </el-button>
          <el-button @click="isShow = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { AddClassAPI } from "@/api/class";
import { ElMessage } from "element-plus";
const emits = defineEmits(['getClassList'])
let isShow = defineModel();
let form = ref();
let classInfo = reactive({
  className: "",
});
let rules = reactive({
  className: [
    { required: true, message: "请输入班级名称", trigger: "blur" },
    { min: 3, max: 10, message: "班级名称长度在3到10个字符", trigger: "blur" },
  ],
});
//关闭对话框回调
const closeDialog = () => {
  isShow.value = false;
  //重置表单
};
const addClass = async ()=>{
    await form.value.validate()
    await AddClassAPI(classInfo)
    isShow.value = false
    ElMessage.success('添加班级成功')
    emits('getClassList')
}
</script>

<style lang="scss" scoped></style>
